<template>
  <div id="suggestlList">
    <div class="md-example-child md-example-child-tabs">
      <md-tabs class="tab-blcok" v-model="selTab" @change="changeTabs($event)">
        <md-tab-pane class="page-content" name="tab1" label="征集中">
          <Underway></Underway>
        </md-tab-pane>
        <md-tab-pane class="page-content" name="tab2" label="已成功">
          <Success></Success>
        </md-tab-pane>
        <md-tab-pane class="page-content" name="tab3" label="已废止">
          <Abolish></Abolish>
        </md-tab-pane>
      </md-tabs>
    </div>
    <div class="send-suggest-btn" @click="navSendSuggest">
      <i></i>
      <span>发布</span>
    </div>
  </div>
</template>

<script>
import {
  Tabs,
  TabPane,
} from "mand-mobile";
import Abolish from "@/components/suggest/abolish"; //已废止
import Success from "@/components/suggest/success"; //已成功
import Underway from "@/components/suggest/underway"; //征集中

export default {
  components: {
    Abolish,
    Success,
    Underway,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane,
  },
  name: "suggestlList",
  data() {
    return {
      selTab: this.$store.state.suggestType
    };
  },
  methods: {
    changeTabs(e){
      this.$store.commit("saveSuggestType", e.name);
    },
    navSendSuggest(){
      this.$router.push({
        path: "/suggest"
      })
    }
  },
  created() {
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#suggestlList {
  .send-suggest-btn {
    position: fixed;
    bottom: 100px;
    right: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: $themeColor;
    color: #fff;
    font-size: 24px;
    margin: 0 15px;
    z-index: 9;
    i {
      width: 38px;
      height: 38px;
      margin-bottom: 4px;
      background: url("/../static/images/suggest/send.png") no-repeat;
      background-size: 100%;
    }
    span {
      margin-bottom: 4px;
    }
  }
}
</style>
